<template>
	<div class="basic-setting">
		<div class="title">基础设置</div>
		<el-form label-position="top" :model="settingForm">
			<el-form-item class="input">
				<span slot="label"
					>UP uid
					<el-popover
						placement="bottom"
						title="扫码获取uid"
						width="150"
						trigger="hover"
					>
						<img :src="QRCodeURL" width="100%" />
						<div class="loginStatus" :class="{ confirm }"></div>
						<div class="loginStatus" :class="{ notScan }">
							<el-button type="primary" @click="getLoginUrl"
								>换一张</el-button
							>
						</div>
						<div class="loginStatus" :class="{ success }">
							<el-result icon="success" title="获取成功">
							</el-result>
						</div>
						<i slot="reference" class="iconfont icon-erweima1"></i>
					</el-popover>
				</span>
				<el-input v-model="settingForm.uid" placeholder="UP主的uid">
				</el-input>
			</el-form-item>
			<el-form-item>
				<span slot="label"
					>清除入场信息
					<el-tooltip
						class="item"
						effect="dark"
						content="开启此功能会清除当前时间段前十秒入场的欢迎消息！"
						placement="top"
					>
						<i class="el-icon-info"></i></el-tooltip
				></span>
				<el-switch
					v-model="settingForm.clearWelCome"
					active-text="开启"
					inactive-text="关闭"
					@change="handleClearWelCome"
				>
				</el-switch>
			</el-form-item>
			<el-form-item class="btn">
				<el-button type="primary" @click="settingUid">
					更新
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import QRCode from "qrcode";
import qs from "qs";
export default {
	data() {
		return {
			settingForm: {
				// up主的uid
				uid: localStorage.getItem("liveUid") || "478490349",
				// 清除前十秒的入场信息
				clearWelCome: !!+localStorage.getItem("clearWelCome") || false,
			},
			// 二维码地址
			QRCodeURL: "",

			// 二维码的key
			oauthKey: "",

			// 是否扫码
			confirm: false,

			// 是否过期
			notScan: false,

			// 二维码时间
			ScanTime: 0,

			// 是否登录成功
			success: false,
		};
	},
	mounted() {
		this.getLoginUrl();
	},
	methods: {
		// 设置up主的uid
		settingUid() {
			this.settingUname(this.settingForm.uid);
			const uid = localStorage.getItem("liveUid");
			// 如果输入框的uid没变 就不驱动更新
			if (uid !== this.settingForm.uid) {
				localStorage.setItem("liveUid", this.settingForm.uid);
				this.$electron.ipcRenderer.send(
					"updateUid",
					this.settingForm.uid
				);
			}
		},

		// 设置up的uname
		settingUname(uid) {
			this.axios
				.get(
					`https://api.bilibili.com/x/space/acc/info?mid=${uid}&jsonp=jsonp`
				)
				.then((res) => {
					localStorage.setItem("upUname", res.data.data.name);
				});
		},

		// 清除前十秒的入场信息开关
		handleClearWelCome(val) {
			localStorage.setItem("clearWelCome", val ? "1" : "0");
		},

		// 获取登录二维码地址
		getLoginUrl() {
			this.ScanTime = 0;
			this.notScan = false;
			this.axios
				.get("https://passport.bilibili.com/qrcode/getLoginUrl")
				.then((res) => {
					this.oauthKey = res.data.data.oauthKey;
					this.getLoginInfo();
					QRCode.toDataURL(res.data.data.url).then((QRCodeURL) => {
						this.QRCodeURL = QRCodeURL;
					});
				});
		},

		// 判断二维码有没有被扫
		getLoginInfo() {
			this.ScanTime++;
			this.axios
				.post(
					"https://passport.bilibili.com/qrcode/getLoginInfo",
					`oauthKey=${this.oauthKey}&gourl=https://www.bilibili.com/`
				)
				.then((res) => {
					// 重构是记得改为res.data.data == -2
					if (this.ScanTime >= 57) {
						this.confirm = false;
						this.notScan = true;
					} else {
						if (res.data.data == -4) {
							setTimeout(() => {
								this.getLoginInfo();
							}, 3000);
						} else if (res.data.data == -5) {
							this.confirm = true;
							setTimeout(() => {
								this.getLoginInfo();
							}, 3000);
						} else {
							this.success = true;
							const query = qs.parse(
								res.data.data.url.split("?")[1]
							);
							const { DedeUserID, bili_jct, SESSDATA } = query;
							this.settingForm.uid = DedeUserID;
							this.settingUid();
							this.$electron.ipcRenderer.send("updateUpInfo", {
								csrf: bili_jct,
								cookie: `SESSDATA=${SESSDATA}`,
							});
							setTimeout(() => {
								this.getLoginUrl();
							}, 5000);
						}
					}
				});
		},
	},
};
</script>

<style lang="scss">
.el-popover {
	padding: 0 !important;
	.el-popover__title {
		font-size: 14px;
		text-align: center;
		transform: translateY(11px);
	}
	.loginStatus {
		display: none;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 150px;
		height: 150px;
	}
	.confirm {
		display: block;
		background: url("")
			rgba(255, 255, 255, 0.8) no-repeat;
		background-position: center;
	}
	.notScan {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
	}
	.success {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		.el-result {
			.el-result__title {
				p {
					font-size: 16px;
				}
			}
		}
	}
}
</style>
